<template>
	<div class="alipay">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>账户充值</span>
			<span class="img"></span>
		</div>	
		<div class="inner" style="margin-bottom: 0.2667rem; border: none;" >
			<span>账户余额</span>
			<p><span style="width: auto;">{{userMoney}}</span>元</p>
		</div>
		<div class="inner" style="border: none;" >
			<span>支付宝实名</span>
			<input type="text" placeholder="请输入支付宝实名"  v-model="name" />
		</div>
		<div class="inner" >
			<span>支付宝账号</span>
			<input type="text" placeholder="请输入支付宝账号" v-model="account"/>
		</div>
		<div class="inner" >
			<span>充值金额</span>
			<input type="text" placeholder="最少100起充" v-model="money"/>
		</div>
		<!--<p style="margin-top: 0.2667rem;">注：进入个人中心->设置-><span style="color: #FFFC25;">支付宝账户认证</span></p>
		<p style="margin-top: 0.34666rem ;margin-bottom: 1.04rem;">绑定支付宝账号，认证通过后，可以提高支付宝到账时间</p>
		-->
		
		<v-button buttonText='下一步' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
		<p style="text-align: center; display: block;line-height: 0.4666rem; margin-top: 0.96rem;">
			到账时间<br />
			08：30-17:30（1小时内到账）<br />
			17:30以后（次日09:30前到账）<br />
			如急需到账，请电话<span style="color: #FFFC25;">400-053-7518</span>
		</p>
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,Money } from '@/util/index'
	import Button from '@/components/Button'
	export default{
		data(){
			return{
				name:"",
				money:"",
				account:"",
				userMoney:'',
				pay:{
					money:"",
					account:"",
					name:'',
				}
			}
		},
		computed: {
			isActive() {
				if (Money(this.money)&&this.account) {
					return true
				} else {
					return false
				}
			},
			getUserData() {
			    return this.userMoney=	this.$store.state.money;
			}
		},
		mounted(){
			if(this.$store.state.pay){
	    		this.pay=this.$store.state.pay;
	    		this.money=this.pay.money;
	    		this.account=this.pay.account;
	    		this.name=this.pay.name;
	    		
	    	}
	    },
	    
		watch: {
		  getUserData(val) {
		    this.userMoney = val;
		  }
		},
	    components: {
			'v-button': Button
		},
		methods:{
			back(){
			    this.$router.back(-1);
			},
			login(){
				if(this.money<100){
					toast("最低100起充，最高充值5000");
					this.money="";
					return 
				}
				if(this.isActive) {
					this.pay.money=this.money;
					this.pay.account=this.account;
					this.pay.name=this.name;
					this.$store.dispatch('savePay',this.pay);
					this.$router.push({path:'/alipayDeatil'})
				}
			}
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next()
		}
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.alipay{
	color:white;
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: 30px;
			height: 30px;
		}
	}
	.inner{
		border-top: 1px solid #232934;
		background: #141723;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.17333rem;
		input{
			flex: 1;
			font-size: @f32;
			 color: white;
		}
		input::-webkit-input-placeholder {
			/* WebKit browsers*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 4 to 18*/
			color: #40495f;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 19+*/
			color: #40495f;
		}
		input:-ms-input-placeholder {
			/* Internet Explorer 10+*/
			color: #40495f;
		}
		span{
			width:2.4rem ;
			font-size:@f32;	
			margin-right: 0.69333rem;
		}
		p{
			font-size: @f32;
			padding:0px;
			
			span{
				margin-right: .3rem;
				color: #FF335B;
				font-weight: bold;
				
			}
		}
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: @Color;
		font-size: @f24;
	}
	.login{
		margin-top: 1.226666rem;
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 0 auto;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
}

</style>